<template>
  <div>
    <div class="radios-box">
      <el-radio-group v-model="tabIndex" @change="jumpInfo">
        <el-radio-button :label="1" name="1">月行驶里程和费用表</el-radio-button>
      </el-radio-group>
    </div>
    <div style="padding:0px 50px 30px">
      <el-row>
        <el-col :span="24">
          <div style="margin: 20px 0 30px">
            <el-button :disabled="!$store.getters.pageAuth.authoritySearch" size="mini" @click="search">搜索</el-button>
            <el-button :disabled="!$store.getters.pageAuth.authoritySearch" size="mini" @click="refresh">重置</el-button>
            <el-button :disabled="!$store.getters.pageAuth.authorityAdd" size="mini" @click="add">增加</el-button>
            <template v-if="insertVisi">
              <el-button type="primary" size="mini"  @click="insertClick">保存</el-button>
              <el-button type="primary" size="mini" @click="insertCancel">取消</el-button>
            </template>
            <template v-else>
              <el-button :disabled="!$store.getters.pageAuth.authorityUpdate" size="mini" @click="insert">插入</el-button>
            </template>
            <template v-if="editVisi">
              <el-button type="primary" size="mini"  @click="editClick">保存</el-button>
              <el-button type="primary" size="mini" @click="editVisi = false">取消</el-button>
            </template>
            <template v-else>
              <el-button :disabled="!$store.getters.pageAuth.authorityUpdate" size="mini" @click="edit">修改</el-button>
            </template>
            <el-button :disabled="!$store.getters.pageAuth.authorityDelete" size="mini" @click="deleteClick">删除</el-button>
            <el-button :disabled="!$store.getters.pageAuth.authorityDown" size="mini" @click="downloadExl">Excel下载</el-button>
            <excel-upload style="top: 10px; left: 10px" type="driveCost"/>
          </div>
          <el-table
            :data="recordSearchObj"
            :border="true"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            class="customTableStyle"
            style="font-size:12px;">
            <el-table-column
            type="index"
              label="编号"
              width="50"/>
            <el-table-column
              label="月"
              min-width="80">
              <template slot-scope="scope">
                <el-select size="mini" filterable clearable v-model="scope.row.yue" placeholder="请选择">
                  <el-option
                    v-for="(item,i) in 12"
                    :key="i"
                    :label="i+1"
                    :value="i+1">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="出发日期"
              min-width="180">
              <template slot-scope="scope">
                <el-date-picker
                  size="mini"
                  clearable
                  v-model="scope.row.cfrq[0]"
                  value-format="yyyy-M-d"
                  type="date"
                  class="datePicker"
                  placeholder="开始日期">
                </el-date-picker>
                <el-date-picker
                  size="mini"
                  clearable
                  v-model="scope.row.cfrq[1]"
                  value-format="yyyy-M-d"
                  type="date"
                  class="datePicker"
                  placeholder="结束日期">
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              label="回程日期"
              min-width="180">
              <template slot-scope="scope">
                <el-date-picker
                  size="mini"
                  clearable
                  v-model="scope.row.hcrq[0]"
                  value-format="yyyy-M-d"
                  type="date"
                  class="datePicker"
                  placeholder="开始日期">
                </el-date-picker>
                <el-date-picker
                  size="mini"
                  clearable
                  v-model="scope.row.hcrq[1]"
                  value-format="yyyy-M-d"
                  type="date"
                  class="datePicker"
                  placeholder="结束日期">
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              label="往返天数"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.wfts" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="主车"
              min-width="120">
              <template slot-scope="scope">
                <el-select size="mini" filterable  clearable v-model="scope.row.zc" placeholder="请选择">
                  <el-option
                    v-for="item in cpList"
                    :key="item.zxcph"
                    :label="item.zxcph"
                    :value="item.zxcph">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="挂车"
              min-width="120">
              <template slot-scope="scope">
                <el-select size="mini" filterable clearable v-model="scope.row.gc" placeholder="请选择">
                  <el-option
                    v-for="item in cpList"
                    :key="item.zxcph"
                    :label="item.zxcph"
                    :value="item.zxcph">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="出发地"
              min-width="120">
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.cfd" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="目的地"
              min-width="120">
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.mdd" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="驾驶员"
              min-width="100">
              <template slot-scope="scope">
                <el-select size="mini" filterable clearable v-model="scope.row.jsy" placeholder="请选择">
                  <el-option
                    v-for="item in sjList"
                    :key="item.xm"
                    :label="item.xm"
                    :value="item.xm">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="装卸点"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.zxd" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="主车起始里程"
              min-width="120">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.zcqslc" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="主车本次里程"
              min-width="120">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.zcbclc" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="主车本次里程(明细)"
              min-width="130">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.bczclc" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="主车截止里程"
              min-width="120">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.zcjzlc" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="挂车起始里程"
              min-width="120">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.gcqslc" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="挂车本次里程"
              min-width="120">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.gcbclc" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="挂车本次里程(明细)"
              min-width="130">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.bcgclc" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="挂车截止里程"
              min-width="120">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.gcjzlc" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="油价"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.yj" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="油数(升)"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.ys" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="油费"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.yf" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="生活费"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.shf" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="住宿费"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.zsf" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="停车费"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.tcf" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="捆扎费"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.kzf" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="加水费"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.jsf" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="电话费"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.dhf" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="其他费用"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.qtf" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="里程工资"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.lcgz" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="转货工资"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.zhgz" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="其他工资"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.qtgz" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="餐/住补贴"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.czbt" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="其他补贴"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.qtbt" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="费用小计"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.fyxj" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="工资小计"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.gzxj" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="补贴小计"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.btxj" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="出车总费用"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.cczfy" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="始发运费"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.sfyf" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="始发合同编号"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.sfhtbh" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="回程运费"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.hcyf" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="回程合同编号"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.sczlc" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="回程备注"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.hcbz" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="结余费用"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" type="number" v-model="scope.row.jyfy" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="运输货物类型"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.yshwlx" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="运输货物名称"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.yshwmc" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="备注"
              min-width="100">
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.bz" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              min-width="150">
              <template slot-scope="scope">
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :total="page.totalCount"
            :page-size="page.pageSize"
            :current-page.sync="page.currPage"
            style="margin-top: 10px;"
            background
            layout="total, slot, prev, pager, next"
            @current-change="search">
            <span>—&nbsp;&nbsp;&nbsp;共 {{page.totalPage}} 页</span>
          </el-pagination>
          <div v-if="addVisi" style="margin-top: 20px">
            <el-row>
              <el-col :span="24">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>增加</span>
                    <el-button style="float: right; font-size:12px; padding: 7px 15px;margin-left:10px" type="text" @click="addClick">保存</el-button>
                    <el-button style="float: right;  font-size:12px; padding: 7px 15px;" type="text" @click="addVisi = false">取消</el-button>
                  </div>
                  <div>
                    <el-table
                      :data="addRecord"
                      :border="true"
                      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                      class="customTableStyle"
                      style="font-size:12px;">
                      <el-table-column
                        label="月"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-select size="mini" filterable clearable v-model="scope.row.yue" placeholder="请选择">
                            <el-option
                              v-for="(item,i) in 12"
                              :key="i"
                              :label="i+1"
                              :value="i+1">
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="出发日期"
                        min-width="150">
                        <template slot-scope="scope">
                          <el-date-picker
                            size="mini"
                            clearable
                            @change="addComputed"
                            v-model="scope.row.cfrq"
                            value-format="yyyy-M-d"
                            type="date"
                            class="datePicker"
                            placeholder="选择日期">
                          </el-date-picker>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="回程日期"
                        min-width="150">
                        <template slot-scope="scope">
                          <el-date-picker
                            size="mini"
                            clearable
                            @change="addComputed"
                            v-model="scope.row.hcrq"
                            value-format="yyyy-M-d"
                            type="date"
                            class="datePicker"
                            placeholder="选择日期">
                          </el-date-picker>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="往返天数"
                        min-width="100">
                        <template slot-scope="scope">
                          {{ scope.row.wfts }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="主车"
                        min-width="120">
                        <template slot-scope="scope">
                          <el-select size="mini" filterable clearable v-model="scope.row.zc" placeholder="请选择">
                            <el-option
                              v-for="item in cpList"
                              :key="item.zxcph"
                              :label="item.zxcph"
                              :value="item.zxcph">
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="挂车"
                        min-width="120">
                        <template slot-scope="scope">
                          <el-select size="mini" filterable clearable v-model="scope.row.gc" placeholder="请选择">
                            <el-option
                              v-for="item in cpList"
                              :key="item.zxcph"
                              :label="item.zxcph"
                              :value="item.zxcph">
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="出发地"
                        min-width="120">
                        <template slot-scope="scope">
                          <el-input size="mini" v-model="scope.row.cfd" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="目的地"
                        min-width="120">
                        <template slot-scope="scope">
                          <el-input size="mini" v-model="scope.row.mdd" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="驾驶员"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-select size="mini" filterable clearable v-model="scope.row.jsy" placeholder="请选择">
                            <el-option
                              v-for="item in sjList"
                              :key="item.xm"
                              :label="item.xm"
                              :value="item.xm">
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="装卸点"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input size="mini" v-model="scope.row.zxd" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="主车起始里程"
                        min-width="120">
                        <template slot-scope="scope">
                          <el-input @input="addComputed" size="mini" type="number" v-model="scope.row.zcqslc" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="主车本次里程"
                        min-width="120">
                        <template slot-scope="scope">
                          <el-input @input="addComputedZcbclc($event,scope.row)" size="mini" type="number" v-model="scope.row.zcbclc" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="主车本次里程(明细)"
                        min-width="130">
                        <template slot-scope="scope">
                          {{ scope.row.bczclc }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="主车截止里程"
                        min-width="110">
                        <template slot-scope="scope">
                          {{ scope.row.zcjzlc }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="挂车起始里程"
                        min-width="120">
                        <template slot-scope="scope">
                          <el-input @input="addComputed" size="mini" type="number" v-model="scope.row.gcqslc" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="挂车本次里程"
                        min-width="120">
                        <template slot-scope="scope">
                          <el-input @input="addComputedGcbclc($event,scope.row)" size="mini" type="number" v-model="scope.row.gcbclc" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="挂车本次里程(明细)"
                        min-width="130">
                        <template slot-scope="scope">
                          {{ scope.row.bcgclc }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="挂车截止里程"
                        min-width="110">
                        <template slot-scope="scope">
                          {{ scope.row.gcjzlc }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="油价"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input @input="addComputed" size="mini" type="number" v-model="scope.row.yj" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="油数(升)"
                        min-width="110">
                        <template slot-scope="scope">
                          {{ scope.row.ys }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="油费"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input @input="addComputed" size="mini" type="number" v-model="scope.row.yf" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="生活费"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input @input="addComputed" size="mini" type="number" v-model="scope.row.shf" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="住宿费"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input @input="addComputed" size="mini" type="number" v-model="scope.row.zsf" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="停车费"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input @input="addComputed" size="mini" type="number" v-model="scope.row.tcf" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="捆扎费"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input @input="addComputed" size="mini" type="number" v-model="scope.row.kzf" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="加水费"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input @input="addComputed" size="mini" type="number" v-model="scope.row.jsf" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="电话费"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input @input="addComputed" size="mini" type="number" v-model="scope.row.dhf" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="其他费用"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input @input="addComputed" size="mini" type="number" v-model="scope.row.qtf" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="里程工资"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input @input="addComputed" size="mini" type="number" v-model="scope.row.lcgz" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="转货工资"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input @input="addComputed" size="mini" type="number" v-model="scope.row.zhgz" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="其他工资"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input @input="addComputed" size="mini" type="number" v-model="scope.row.qtgz" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="餐/住补贴"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input @input="addComputed" size="mini" type="number" v-model="scope.row.czbt" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="其他补贴"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input @input="addComputed" size="mini" type="number" v-model="scope.row.qtbt" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="费用小计"
                        min-width="110">
                        <template slot-scope="scope">
                          {{ scope.row.fyxj }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="工资小计"
                        min-width="110">
                        <template slot-scope="scope">
                          {{ scope.row.gzxj }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="补贴小计"
                        min-width="110">
                        <template slot-scope="scope">
                          {{ scope.row.btxj }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="出车总费用"
                        min-width="110">
                        <template slot-scope="scope">
                          {{ scope.row.cczfy }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="始发运费"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input @input="addComputed" size="mini" type="number" v-model="scope.row.sfyf" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="始发合同编号"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input size="mini" v-model="scope.row.sfhtbh" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="回程运费"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input @input="addComputed" size="mini" type="number" v-model="scope.row.hcyf" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="回程合同编号"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input size="mini" v-model="scope.row.hchtbh" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="回程备注"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input size="mini" v-model="scope.row.hcbz" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="结余费用"
                        min-width="110">
                        <template slot-scope="scope">
                          {{ scope.row.jyfy }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="运输货物类型"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input size="mini" v-model="scope.row.yshwlx" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="运输货物名称"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input size="mini" v-model="scope.row.yshwmc" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="备注"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input size="mini" v-model="scope.row.bz" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <el-table
            :data="page.list"
            :border="true"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            :span-method="spanMethod"
            highlight-current-row
            @row-click="rowClick"
            class="customTableStyle"
            style="font-size:12px;">
            <el-table-column
              label="编号"
              width="50">
              <template slot-scope="scope">
                {{scope.row.index + 1}}
              </template>
            </el-table-column>
            <el-table-column
              label="月"
              min-width="80">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-select size="mini" filterable clearable v-model="editRecord[scope.row.editIndex].yue" placeholder="请选择">
                    <el-option
                      v-for="(item,i) in 12"
                      :key="i"
                      :label="i"
                      :value="i">
                    </el-option>
                  </el-select>
                </div>
                <div v-else>{{ scope.row.yue }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="出发日期"
              min-width="180">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-date-picker
                    size="mini"
                    clearable
                    v-model="editRecord[scope.row.editIndex].cfrq"
                    value-format="yyyy-M-d"
                    type="date"
                    class="datePicker"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
                <div v-else>{{ scope.row.cfrq }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="回程日期"
              min-width="180">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-date-picker
                    size="mini"
                    clearable
                    @change="editComputed"
                    v-model="editRecord[scope.row.editIndex].hcrq"
                    value-format="yyyy-M-d"
                    type="date"
                    class="datePicker"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
                <div v-else>{{ scope.row.hcrq }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="往返天数"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  {{ editRecord[scope.row.editIndex].wfts }}
                </div>
                <div v-else>{{ scope.row.wfts }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="主车"
              min-width="120">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-select size="mini" filterable clearable v-model="editRecord[scope.row.editIndex].zc" placeholder="请选择">
                    <el-option
                      v-for="item in cpList"
                      :key="item.zxcph"
                      :label="item.zxcph"
                      :value="item.zxcph">
                    </el-option>
                  </el-select>
                </div>
                <div v-else>{{ scope.row.zc }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="挂车"
              min-width="120">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-select size="mini" filterable clearable v-model="editRecord[scope.row.editIndex].gc" placeholder="请选择">
                    <el-option
                      v-for="item in cpList"
                      :key="item.zxcph"
                      :label="item.zxcph"
                      :value="item.zxcph">
                    </el-option>
                  </el-select>
                </div>
                <div v-else>{{ scope.row.gc }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="出发地"
              min-width="120">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input size="mini" v-model="editRecord[scope.row.editIndex].cfd" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.cfd }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="目的地"
              min-width="120">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input size="mini" v-model="editRecord[scope.row.editIndex].mdd" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.mdd }}</div>
              </template>
            </el-table-column>


            <el-table-column
              label="驾驶员"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-select size="mini" filterable clearable v-model="editRecord[scope.row.editIndex].jsy" placeholder="请选择">
                    <el-option
                      v-for="item in sjList"
                      :key="item.xm"
                      :label="item.xm"
                      :value="item.xm">
                    </el-option>
                  </el-select>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-select size="mini" filterable clearable v-model="scope.row.jsy" placeholder="请选择">
                    <el-option
                      v-for="item in sjList"
                      :key="item.xm"
                      :label="item.xm"
                      :value="item.xm">
                    </el-option>
                  </el-select>
                </div>
                <div v-else>{{ scope.row.jsy }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="装卸点"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input size="mini" v-model="editRecord[scope.row.editIndex].zxd" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input size="mini" v-model="scope.row.zxd" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.zxd }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="主车起始里程"
              min-width="120">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].zcqslc" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.zcqslc }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="主车本次里程"
              min-width="120">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].zcbclc" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.zcbclc }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="主车本次里程(明细)"
              min-width="130">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input size="mini" type="number" v-model="editRecord[scope.row.editIndex].bczclc" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input size="mini" type="number" v-model="scope.row.bczclc" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.bczclc }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="主车截止里程"
              min-width="120">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  {{ editRecord[scope.row.editIndex].zcjzlc }}
                  <!-- <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].zcjzlc" placeholder="请输入内容"></el-input> -->
                </div>
                <div v-else>{{ scope.row.zcjzlc }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="挂车起始里程"
              min-width="120">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].gcqslc" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.gcqslc }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="挂车本次里程"
              min-width="120">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].gcbclc" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.gcbclc }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="挂车本次里程(明细)"
              min-width="130">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input size="mini" type="number" v-model="editRecord[scope.row.editIndex].bcgclc" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input size="mini" type="number" v-model="scope.row.bcgclc" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.bcgclc }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="挂车截止里程"
              min-width="120">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  {{ editRecord[scope.row.editIndex].gcjzlc }}
                  <!-- <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].gcjzlc" placeholder="请输入内容"></el-input> -->
                </div>
                <div v-else>{{ scope.row.gcjzlc }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="油价"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].yj" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input @input="insertComputed" size="mini" type="number" v-model="scope.row.yj" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.yj }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="油数(升)"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  {{ editRecord[scope.row.editIndex].ys }}
                </div>
                <div v-else>{{ scope.row.ys }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="油费"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].yf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input @input="insertComputed" size="mini" type="number" v-model="scope.row.yf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.yf }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="生活费"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].shf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input @input="insertComputed" size="mini" type="number" v-model="scope.row.shf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.shf }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="住宿费"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].zsf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input @input="insertComputed" size="mini" type="number" v-model="scope.row.zsf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.zsf }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="停车费"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].tcf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input @input="insertComputed" size="mini" type="number" v-model="scope.row.tcf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.tcf }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="捆扎费"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].kzf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input @input="insertComputed" size="mini" type="number" v-model="scope.row.kzf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.kzf }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="加水费"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].jsf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input @input="insertComputed" size="mini" type="number" v-model="scope.row.jsf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.jsf }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="电话费"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].dhf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input @input="insertComputed" size="mini" type="number" v-model="scope.row.dhf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.dhf }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="其他费用"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].qtf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input @input="insertComputed" size="mini" type="number" v-model="scope.row.qtf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.qtf }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="里程工资"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].lcgz" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input @input="insertComputed" size="mini" type="number" v-model="scope.row.lcgz" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.lcgz }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="转货工资"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].zhgz" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input @input="insertComputed" size="mini" type="number" v-model="scope.row.zhgz" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.zhgz }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="其他工资"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].qtgz" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input @input="insertComputed" size="mini" type="number" v-model="scope.row.qtgz" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.qtgz }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="餐/住补贴"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].czbt" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input @input="insertComputed" size="mini" type="number" v-model="scope.row.czbt" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.czbt }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="其他补贴"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].qtbt" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input @input="insertComputed" size="mini" type="number" v-model="scope.row.qtbt" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.qtbt }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="费用小计"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  {{ editRecord[scope.row.editIndex].fyxj }}
                </div>
                <div v-else>{{ scope.row.fyxj }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="工资小计"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  {{ editRecord[scope.row.editIndex].gzxj }}
                </div>
                <div v-else>{{ scope.row.gzxj }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="补贴小计"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  {{ editRecord[scope.row.editIndex].btxj }}
                </div>
                <div v-else>{{ scope.row.btxj }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="出车总费用"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  {{ editRecord[scope.row.editIndex].cczfy }}
                </div>
                <div v-else>{{ scope.row.cczfy }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="始发运费"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].sfyf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input size="mini" type="number" v-model="scope.row.sfyf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.sfyf }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="始发合同编号"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input size="mini" v-model="editRecord[scope.row.editIndex].sfhtbh" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input size="mini" v-model="scope.row.sfhtbh" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.sfhtbh }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="回程运费"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input @input="editComputed" size="mini" type="number" v-model="editRecord[scope.row.editIndex].hcyf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input size="mini" type="number" v-model="scope.row.hcyf" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.hcyf }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="回程合同编号"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input size="mini" v-model="editRecord[scope.row.editIndex].hchtbh" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input size="mini" v-model="scope.row.hchtbh" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.hchtbh }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="回程备注"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input size="mini" v-model="editRecord[scope.row.editIndex].hcbz" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input size="mini" v-model="scope.row.hcbz" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.hcbz }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="结余费用"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  {{ editRecord[scope.row.editIndex].jyfy }}
                </div>
                <div v-else>{{ scope.row.jyfy }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="运输货物类型"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input size="mini" v-model="editRecord[scope.row.editIndex].yshwlx" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input size="mini" v-model="scope.row.yshwlx" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.yshwlx }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="运输货物名称"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input size="mini" v-model="editRecord[scope.row.editIndex].yshwmc" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input size="mini" v-model="scope.row.yshwmc" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.yshwmc }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="备注"
              min-width="100">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.index == editRecord[0].index">
                  <el-input size="mini" v-model="editRecord[scope.row.editIndex].bz" placeholder="请输入内容"></el-input>
                </div>
                <div v-else-if="insertVisi && scope.row.isAdd">
                  <el-input size="mini" v-model="scope.row.bz" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.bz }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              min-width="150">
              <template slot-scope="scope">
                <el-button :disabled="!$store.getters.pageAuth.authorityDelete" v-if="!scope.row.isAdd && scope.row.pid" size="mini" @click="deleteDetailClick(scope.row.did)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            :data="[{}]"
            :border="true"
            :show-header="true"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            class="customTableStyle sumTable"
            style="font-size:12px;">
            <el-table-column
              label=""
              width="50">
              <template slot-scope="scope">
                汇总
              </template>
            </el-table-column>
            <el-table-column
              label="月"
              min-width="80">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="出发日期"
              min-width="180">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="回程日期"
              min-width="180">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="往返天数"
              min-width="100">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="主车"
              min-width="120">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="挂车"
              min-width="120">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="出发地"
              min-width="120">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="目的地"
              min-width="120">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="驾驶员"
              min-width="100">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="装卸点"
              min-width="100">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="主车起始里程"
              class-name="text"
              min-width="120">
              <template slot-scope="scope">
                {{ pageTotal.zcqslcTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="主车本次里程"
              class-name="text"
              min-width="120">
              <template slot-scope="scope">
                {{ pageTotal.zcbclcTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="主车本次里程(明细)"
              min-width="130">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="主车截止里程"
              class-name="text"
              min-width="120">
              <template slot-scope="scope">
                {{ pageTotal.zcjzlcTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="挂车起始里程"
              class-name="text"
              min-width="120">
              <template slot-scope="scope">
                {{ pageTotal.gcqslcTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="挂车本次里程"
              class-name="text"
              min-width="120">
              <template slot-scope="scope">
                {{ pageTotal.gcbclcTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="挂车本次里程(明细)"
              min-width="130">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="挂车截止里程"
              class-name="text"
              min-width="120">
              <template slot-scope="scope">
                {{ pageTotal.gcjzlcTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="油价"
              min-width="100">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="油数(升)"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.ysTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="油费"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.yfTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="生活费"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.shfTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="住宿费"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.zsfTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="停车费"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.tcfTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="捆扎费"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.kzfTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="加水费"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.jsfTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="电话费"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.dhfTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="其他费用"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.qtfTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="里程工资"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.lcgzTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="转货工资"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.zhgzTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="其他工资"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.qtgzTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="餐/住补贴"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.czbtTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="其他补贴"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.qtbtTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="费用小计"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.fyxjTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="工资小计"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.gzxjTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="补贴小计"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.btxjTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="出车总费用"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.cczfyTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="始发运费"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.sfyfTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="始发合同编号"
              min-width="100">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="回程运费"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.hcyfTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="回程合同编号"
              min-width="100">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="回程备注"
              min-width="100">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="结余费用"
              class-name="text"
              min-width="100">
              <template slot-scope="scope">
                {{ pageTotal.jyfyTotal }}
              </template>
            </el-table-column>
            <el-table-column
              label="运输货物类型"
              min-width="100">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="运输货物名称"
              min-width="100">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="备注"
              min-width="100">
              <template slot-scope="scope">
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              min-width="150">
              <template slot-scope="scope">
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <div v-if="activeRecord.id">
        <el-row>
          <el-col :span="24">
            <el-row>
              <div class="upload-scrollcontainer">
                <div class="upload-scrollbox" :style="{width: (activeImgList.length+1) * 160 + 'px'}">
                  <div class="upload-container">
                    <imgUpload :id="activeRecord.id" type="driveCost" @success="getImgList"/>
                  </div>
                  <div v-for="(item, index) in activeImgList" :key="item.path" class="upload-container">
                    <div class="upload-title">{{index +1}}&nbsp;&nbsp;{{ item.bz }}</div>
                    <div class="upload-pic-box">
                      <img :src="item.path" alt="" @click="$imageViewer">
                    </div>
                    <i class="el-icon-delete upload-del" @click.stop="imgDel(item.name)"></i>
                  </div>
                </div>
              </div>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-row>
              <div>
                <!-- <el-button size="mini" @click="printPic">图片打印</el-button> -->
              </div>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import adapter from './adapter'
import imgUpload from '@/components/imgUpload'
import excelUpload from '@/components/excelUpload'
export default {
  name: 'monthDriveMileageCost',
  filters: {
  },
  components: {
    imgUpload,
    excelUpload,
  },
  data() {
    return {
      ...adapter.data,
      tabIndex: 1, // tab序号
    }
  },
  computed: {
    ...adapter.computed
  },
  created() {
    // 初始化
    this.initPage()
    Promise.all([this.getGoodsList(), this.getGoodsTypeList(), this.getListSj(), this.getListCp()]).then (() => {
      })
    this.search()
  },
  mounted() {
  },
  methods: {
    ...adapter.methods,
    /**
     * 跳转车辆/员工信息
     */
    jumpInfo(tabIndex) {
    },
  }
}
</script>
<style>
.label_img:hover+.el-button{
  background: rgba(0, 0, 102, 1);
} 
</style>
<style lang="scss" scoped>

.el-input-number{
  width: 90px;
}
.car-detail-title{
  font-size: 30px;
  text-align: center;
}
.radios-box{
  padding: 20px 0 10px 20px;
}
</style>

